<template>
  <view
    class="login-wrapper flex-col flex-center-y"
    :data-theme="theme"
    :style="{ background: loginBg }"
  >
    <view class="logo-icon">
      <image :src="logoUrl" mode="widthFix"></image>
    </view>
    <!-- #ifdef APP -->
    <view class="navbar">
      <view class="content">
        <view :style="{ height: `${getHeight.barTop}px` }"></view>
        <view
          class="acea-row bar"
          :style="{
            height: `${getHeight.barHeight}px`,
            width: `${750 - 2 * getHeight.barWidth}rpx`,
          }"
        >
          <view class="back-icon flex-center-y">
            <view
              @click="back"
              class="iconfont icon-xiangzuo back-icon"
              :style="{ lineHeight: `${getHeight.barHeight}rpx` }"
            ></view>
          </view>
        </view>
      </view>
    </view>
    <!-- #endif -->
    <!-- 不是app 显示输入框登录 -->
    <view class="whiteBg" v-if="formItem === 1 && !isAppScreen">
      <view class="list" v-if="current !== 1">
        <form @submit.prevent="submit">
          <view class="item">
            <view class="acea-row row-middle">
              <!-- #ifdef APP -->
              <view class="input-prefix-image">
                <image
                  mode="widthFix"
                  src="@/static/app/prefix-phone.png"
                ></image>
              </view>
              <!-- #endif -->
              <!-- #ifdef WEB -->
              <view class="input-prefix-image">
                <image
                  mode="widthFix"
                  src="@/static/web/prefix-phone.png"
                ></image>
              </view>
              <!-- #endif -->
              <!-- #ifdef MP -->
              <view class="input-prefix-image">
                <image
                  mode="widthFix"
                  src="https://hhxg-shop.oss-cn-hangzhou.aliyuncs.com/crmebimage/public/product/2025/01/18/59096e6341d840a1b2c8f6d53fc42ec8fv5c9dodhu.png"
                ></image>
              </view>
              <!-- #endif -->
              <input
                type="number"
                class="texts"
                placeholder="输入手机号码"
                v-model="phone"
                maxlength="11"
                required
              />
            </view>
          </view>
          <view class="item">
            <view class="acea-row row-middle">
              <view class="input-prefix-image">
                <!-- #ifdef APP -->
                <view class="input-prefix-image">
                  <image
                    mode="widthFix"
                    src="@/static/app/prefix-password.png"
                  ></image>
                </view>
                <!-- #endif -->
                <!-- #ifdef WEB -->
                <view class="input-prefix-image">
                  <image
                    mode="widthFix"
                    src="@/static/web/prefix-password.png"
                  ></image>
                </view>
                <!-- #endif -->
                <!-- #ifdef MP -->
                <view class="input-prefix-image">
                  <image
                    mode="widthFix"
                    src="https://hhxg-shop.oss-cn-hangzhou.aliyuncs.com/crmebimage/public/product/2025/01/18/f39e42bb1fb84a498010a5cbd6dabed5pyaj8xj5mw.png"
                  ></image>
                </view>
                <!-- #endif -->
              </view>
              <input
                :type="passwordHide ? `password` : `text`"
                class="texts"
                placeholder="填写登录密码"
                maxlength="18"
                v-model="password"
                style="padding-left: 0"
                required
              />
              <view class="input-append-image">
                <!-- #ifdef APP -->
                <view class="input-prefix-image">
                  <image
                    mode="widthFix"
                    v-if="passwordHide"
                    @click="passwordHide = false"
                    src="@/static/app/password-show.png"
                  ></image>

                  <image
                    mode="widthFix"
                    v-if="!passwordHide"
                    @click="passwordHide = true"
                    src="@/static/app/password-hide.png"
                  ></image>
                </view>
                <!-- #endif -->
                <!-- #ifdef WEB -->
                <view class="input-prefix-image">
                  <image
                    mode="widthFix"
                    v-if="passwordHide"
                    @click="passwordHide = false"
                    src="@/static/web/password-show.png"
                  ></image>
                  <image
                    mode="widthFix"
                    v-if="!passwordHide"
                    @click="passwordHide = true"
                    src="@/static/web/password-hide.png"
                  ></image>
                </view>
                <!-- #endif -->
                <!-- #ifdef MP -->
                <view class="input-prefix-image">
                  <image
                    mode="widthFix"
                    v-if="passwordHide"
                    @click="passwordHide = false"
                    src="https://hhxg-shop.oss-cn-hangzhou.aliyuncs.com/crmebimage/public/product/2025/01/18/6ed7c4f9ec754af1a52e78931a167e61z23zlsd627.png"
                  ></image>
                  <image
                    mode="widthFix"
                    v-if="!passwordHide"
                    @click="passwordHide = true"
                    src="https://hhxg-shop.oss-cn-hangzhou.aliyuncs.com/crmebimage/public/product/2025/01/18/841f033b84f34053a3905046f1f6098e2qx3tfvpxv.png"
                  ></image>
                </view>
                <!-- #endif -->
              </view>
            </view>
          </view>
        </form>
      </view>
      <view
        class="list"
        v-if="current !== 0 || appLoginStatus || appleLoginStatus"
      >
        <view class="item">
          <view class="acea-row row-middle">
            <view class="input-prefix-image">
              <!-- #ifdef APP -->
              <view class="input-prefix-image">
                <image
                  mode="widthFix"
                  src="@/static/app/prefix-phone.png"
                ></image>
              </view>
              <!-- #endif -->
              <!-- #ifdef WEB -->
              <view class="input-prefix-image">
                <image
                  mode="widthFix"
                  src="@/static/web/prefix-phone.png"
                ></image>
              </view>
              <!-- #endif -->
              <!-- #ifdef MP -->
              <view class="input-prefix-image">
                <image
                  mode="widthFix"
                  src="https://hhxg-shop.oss-cn-hangzhou.aliyuncs.com/crmebimage/public/product/2025/01/18/59096e6341d840a1b2c8f6d53fc42ec8fv5c9dodhu.png"
                ></image>
              </view>
              <!-- #endif -->
            </view>
            <input
              type="number"
              class="texts"
              placeholder="输入手机号码"
              v-model="phone"
              maxlength="11"
            />
          </view>
        </view>
        <view class="item">
          <view class="acea-row row-middle">
            <view class="input-prefix-image">
              <!-- #ifdef APP -->
              <view class="input-prefix-image">
                <image
                  mode="widthFix"
                  src="@/static/app/prefix-password.png"
                ></image>
              </view>
              <!-- #endif -->
              <!-- #ifdef WEB -->
              <view class="input-prefix-image">
                <image
                  mode="widthFix"
                  src="@/static/web/prefix-password.png"
                ></image>
              </view>
              <!-- #endif -->
              <!-- #ifdef MP -->
              <view class="input-prefix-image">
                <image
                  mode="widthFix"
                  src="https://hhxg-shop.oss-cn-hangzhou.aliyuncs.com/crmebimage/public/product/2025/01/18/f39e42bb1fb84a498010a5cbd6dabed5pyaj8xj5mw.png"
                ></image>
              </view>
              <!-- #endif -->
            </view>
            <input
              type="number"
              placeholder="填写验证码"
              class="codeIput"
              v-model="captcha"
              maxlength="6"
            />
            <button
              class="code"
              :disabled="disabled"
              :class="disabled === true ? 'on' : ''"
              @click="code"
              hover-class="none"
            >
              {{ text }}
            </button>
          </view>
        </view>
        <view class="item" v-if="isShowCode">
          <view class="acea-row row-middle">
            <view class="input-prefix-image">
              <!-- #ifdef APP -->
              <view class="input-prefix-image">
                <image
                  mode="widthFix"
                  src="@/static/app/prefix-password.png"
                ></image>
              </view>
              <!-- #endif -->
              <!-- #ifdef WEB -->
              <view class="input-prefix-image">
                <image
                  mode="widthFix"
                  src="@/static/web/prefix-password.png"
                ></image>
              </view>
              <!-- #endif -->
              <!-- #ifdef MP -->
              <view class="input-prefix-image">
                <image
                  mode="widthFix"
                  src="https://hhxg-shop.oss-cn-hangzhou.aliyuncs.com/crmebimage/public/product/2025/01/18/f39e42bb1fb84a498010a5cbd6dabed5pyaj8xj5mw.png"
                ></image>
              </view>
              <!-- #endif -->
            </view>
            <input
              type="number"
              placeholder="填写验证码"
              class="codeIput"
              v-model="codeVal"
              maxlength="6"
            />
            <view class="code" @click="again"><img :src="codeUrl" /></view>
          </view>
        </view>
      </view>
      <view class="protocol acea-row row-between-wrapper">
        <checkbox-group
          class="checkgroup acea-row"
          @change="isAgree = !isAgree"
          style="align-items: end"
        >
          <checkbox class="checkbox" :checked="isAgree ? true : false" />
          <text class="protocol_text"
            >我已阅读并同意<text @click="userAgree" class="font_pro"
              >《用户协议》</text
            ></text
          >
        </checkbox-group>

        <text class="forget-password" v-if="current == 0" @click="forgePassword"
          >找回密码</text
        >
      </view>
      <view class="logon" @click="loginMobile" v-if="current !== 0">登录</view>
      <view class="logon" @click="submit" v-if="current === 0">登录</view>

      <template v-if="!isAppScreen">
        <view class="appLogin" v-if="!appLoginStatus && !appleLoginStatus">
          <view class="hds">
            <span class="line"></span>
            <p>其他方式登录</p>
            <span class="line"></span>
          </view>
          <view class="btn-wrapper">
            <!-- #ifdef APP -->
            <view class="btn wx" @click="wxLogin">
              <image
                src="@/static/app/wechat-login.png"
                mode="widthFix"
              ></image>
            </view>
            <view class="btn mima" v-if="current == 1" @click="current = 0">
              <image
                src="@/static/app/password-login.png"
                mode="widthFix"
              ></image>
            </view>
            <view class="btn yanzheng" v-if="current == 0" @click="current = 1">
              <image src="@/static/app/sms-login.png" mode="widthFix"></image>
            </view>
            <!-- <view class="btn apple-btn" @click="appleLogin" v-if="appleShow">
            <view class="iconfont icon-s-pingguo"></view>
          </view> -->
            <!-- #endif -->

            <!-- #ifdef H5 -->
            <view class="btn mima" v-if="current == 1" @click="current = 0">
              <image
                src="@/static/web/password-login.png"
                mode="widthFix"
              ></image>
            </view>
            <view class="btn yanzheng" v-if="current == 0" @click="current = 1">
              <image src="@/static/web/sms-login.png" mode="widthFix"></image>
            </view>
            <!-- #endif -->
            <!-- #ifdef MP -->
            <view class="btn mima" v-if="current == 1" @click="current = 0">
              <image
                src="https://hhxg-shop.oss-cn-hangzhou.aliyuncs.com/crmebimage/public/product/2025/01/18/49ed94990671492996d328b9b87ae332qkeo176bmp.png"
                mode="widthFix"
              ></image>
            </view>
            <view class="btn yanzheng" v-if="current == 0" @click="current = 1">
              <image
                src="https://hhxg-shop.oss-cn-hangzhou.aliyuncs.com/crmebimage/public/product/2025/01/18/0c3c712624af4055888f05943f44013er85gch6vgq.png"
                mode="widthFix"
              ></image>
            </view>
            <!-- #endif -->
          </view>
        </view></template
      >
    </view>
    <!-- 是app的话 选择微信 或者 一键登录 -->

    <view class="whiteBg is-app-screen flex-col flex-center-y" v-else>
      <view class="login-button-group">
        <view class="login-button wechat flex-center" @click="wxLogin">
          <view class="button-prefix">
            <!-- #ifdef APP -->
            <view class="input-prefix-image">
              <image
                mode="widthFix"
                src="@/static/app/wechat-transparent.png"
              ></image>
            </view>
            <!-- #endif -->
            <!-- #ifdef WEB -->
            <view class="input-prefix-image">
              <image
                mode="widthFix"
                src="@/static/web/wechat-transparent.png"
              ></image>
            </view>
            <!-- #endif -->
            <!-- #ifdef MP -->
            <view class="input-prefix-image">
              <image
                mode="widthFix"
                src="https://hhxg-shop.oss-cn-hangzhou.aliyuncs.com/crmebimage/public/product/2025/01/18/1e03b81210f24704a386d493fdad481fclj9ieygr5.png"
              ></image>
            </view>
            <!-- #endif -->
          </view>
          <text>微信登录</text></view
        ><view class="login-button flex-center" @click="phoneLoginHandle">
          <view class="button-prefix">
            <!-- #ifdef APP -->
            <view class="input-prefix-image">
              <image
                mode="widthFix"
                src="@/static/app/phone-transparent.png"
              ></image>
            </view>
            <!-- #endif -->
            <!-- #ifdef WEB -->
            <view class="input-prefix-image">
              <image
                mode="widthFix"
                src="@/static/web/phone-transparent.png"
              ></image>
            </view>
            <!-- #endif -->
            <!-- #ifdef MP -->
            <view class="input-prefix-image">
              <image
                mode="widthFix"
                src="https://hhxg-shop.oss-cn-hangzhou.aliyuncs.com/crmebimage/public/product/2025/01/18/6e167797c2234de29c1ed953a18e9e59rwaeep1ye8.png"
              ></image>
            </view>
            <!-- #endif -->
          </view>
          <text>手机号登录</text>
        </view>
      </view>
      <view class="protocol acea-row row-between-wrapper">
        <checkbox-group
          class="checkgroup acea-row"
          @change="isAgree = !isAgree"
          style="align-items: end"
        >
          <checkbox class="checkbox" :checked="isAgree ? true : false" />
          <text class="protocol_text"
            >我已阅读并同意<text @click="userAgree" class="font_pro"
              >《用户协议》</text
            ></text
          >
        </checkbox-group>
      </view>
    </view>
    <view class="copyright flex-center" v-if="isAppScreen">
      <!-- #ifdef APP -->
      <image mode="widthFix" src="@/static/app/logo.png"></image>
      <!-- #endif -->
      <!-- #ifdef WEB -->
      <image mode="widthFix" src="@/static/web/logo.png"></image>
      <!-- #endif -->
      <!-- #ifdef MP -->
      <image mode="widthFix" src="@/static/web/logo.png"></image>
      <!-- #endif -->
    </view>
    <view class="bottom"></view>

    <Verify
      @success="handlerOnVerSuccess"
      :captchaType="'blockPuzzle'"
      :imgSize="{ width: '310px', height: '155px' }"
      ref="verify"
    ></Verify>
  </view>
</template>
<script>
import sendVerifyCode from "@/mixins/SendVerifyCode";
import Verify from "../components/verifition/verify.vue";
import {
  loginH5,
  loginMobile,
  registerVerify,
  register,
  aliyunPhoneLogin,
} from "@/api/user";
let app = getApp();
import { loginConfigApi, appAuth, appleLogin } from "@/api/public";
import { VUE_APP_API_URL } from "@/utils";
import { Debounce } from "@/utils/validate.js";
import { goToAgreement } from "@/libs/order";

const BACK_URL = "login_back_url";

// #ifdef APP

import uiConfig from "@/libs/ui/ui-config.js";
const aLiSDKModule = uni.requireNativePlugin("AliCloud-NirvanaPns");
// #endif

export default {
  name: "Login",
  mixins: [sendVerifyCode],
  components: {
    Verify,
  },
  data: function () {
    return {
      // #ifdef APP
      isAppScreen: true,
      isCanAliYunPhone: true,
      // #endif

      // #ifndef APP
      isAppScreen: false,
      // #endif
      getHeight: this.$util.getWXStatusHeight(),

      isAgree: false,
      passwordHide: true, // 密码是否隐藏
      navList: ["验证码登录", "密码登录"],
      current: 0,
      phone: "",
      password: "",
      captcha: "",
      formItem: 1,
      type: "login",
      logoUrl: "",
      keyCode: "",
      codeUrl: "",
      codeVal: "",
      isShowCode: false,
      platform: "",
      appLoginStatus: false, // 微信登录强制绑定手机号码状态
      appUserInfo: {}, // 微信登录保存的用户信息
      appleLoginStatus: false, // 苹果登录强制绑定手机号码状态
      appleUserInfo: null,
      appleShow: false, // 苹果登录版本必须要求ios13以上的
      theme: app.globalData.theme,
      loginBg: "#f5f5f5", // 登录背景色
    };
  },
  watch: {
    formItem: function (nval, oVal) {
      if (nval == 1) {
        this.type = "login";
      } else {
        this.type = "register";
      }
    },
  },
  mounted: function () {
    this.getCode();
    this.getLogoImage();
  },
  onLoad() {
    let self = this;
    uni.getSystemInfo({
      success: function (res) {
        if (
          res.platform.toLowerCase() == "ios" &&
          res.system.split(" ")[1] >= "13"
        ) {
          self.appleShow = true;
          self.platform = res.platform;
        }
      },
    });

    // #ifdef APP
    aLiSDKModule.accelerateLoginPage(5000, (result) => {
      console.log(JSON.stringify(result));
      if ("600000" == result.resultCode) {
        console.log("加速授权页拉起成功");
      } else {
        console.log("授权页加速拉起失败，" + result.msg);
        this.isCanAliYunPhone = false;
      }
    });
    // #endif
  },
  methods: {
    back() {
      uni.navigateBack({
        delta: 1,
      });
    },

   
    phoneLoginHandle() {
      // #ifdef APP

      if (!this.isCanAliYunPhone) {
        this.isAppScreen = false;
        return;
      }
      // if (!this.isAgree)
      //   return this.$util.Tips({
      //     title: "请勾选用户隐私协议",
      //   });
      const self = this;
      const config = uiConfig.buildPrivacyAlertFullscreen();
      aLiSDKModule.getLoginToken(
        6000,
        config,
        (tokenResult) => {
          console.log(tokenResult);

          if ("600001" == tokenResult.resultCode) {
            aLiSDKModule.setCheckboxIsChecked(false);
          } else if ("600000" == tokenResult.resultCode) {
            console.log("执行登录逻辑");
            self.aliPhoneLogin(tokenResult.token);
            //手动关闭授权页
          } else {
            self.isAppScreen = false;
            //手动关闭授权页
            aLiSDKModule.quitLoginPage();
          }
        },
        (clickResult) => {
          console.log(JSON.stringify(clickResult));
          switch (clickResult.resultCode) {
            case "700000":
              console.log("用户点击返回按钮");
              aLiSDKModule.quitLoginPage();
              break;
            case "700001":
              self.isAppScreen = false;
              break;
            case "700002":
              console.log("用户点击登录按钮");
              if (!clickResult.result.isChecked) {
                plus.nativeUI.closeToast();
                plus.nativeUI.toast("请先同意用户隐私协议");
              }
              break;
            case "700003":
              console.log("用户点击checkBox");
              break;
            case "700004":
              console.log("用户点击协议");
              break;

            case "700010":
              console.log("用户点击返回按钮");
              aLiSDKModule.quitLoginPage();
              break;
          }
        },
        (customUiResult) => {
          console.log("点击了自定义控件 " + JSON.stringify(customUiResult));
          if ("close" == customUiResult.widgetId) {
            //点击了自定义的关闭授权页按钮
            aLiSDKModule.quitLoginPage();
          } else if ("closePrivacyAlert" == customUiResult.widgetId) {
            aLiSDKModule.closePrivactAlertView();
          } else {
            plus.nativeUI.toast(
              "点击了自定义按钮，widgetId：" + customUiResult.widgetId
            );
          }
        }
      );
      // #endif

      // #ifndef APP
      this.isAppScreen = false;
      // #endif
    },
    userAgree() {
      goToAgreement("userinfo");
    },
    // 苹果登录
    appleLogin() {
      let self = this;
      this.phone = "";
      this.captcha = "";
      if (!this.isAgree)
        return this.$util.Tips({
          title: "请勾选用户隐私协议",
        });
      uni.showLoading({
        title: "登录中",
      });
      uni.login({
        provider: "apple",
        timeout: 10000,
        success(loginRes) {
          uni.hideLoading();
          uni.getUserInfo({
            provider: "apple",
            success: function (infoRes) {
              self.appleUserInfo = infoRes.userInfo;
              self.appleLoginApi();
            },
            fail() {
              uni.hideLoading();
              uni.showToast({
                title: "获取用户信息失败",
                icon: "none",
                duration: 2000,
              });
            },
            complete() {
              uni.hideLoading();
            },
          });
        },
        fail(error) {
          uni.hideLoading();
        },
      });
    },
    // 苹果登录Api
    appleLoginApi() {
      appleLogin({
        openId: this.appleUserInfo.openId,
        email:
          this.appleUserInfo.email == undefined ? "" : this.appleUserInfo.email,
        identityToken: this.appleUserInfo.identityToken || "",
      })
        .then((res) => {
          let data = res.data;
          this.$store.commit("LOGIN", {
            token: data.token,
          });
          if (
            data.isNew &&
            data.newPeopleCouponList &&
            data.newPeopleCouponList.length !== 0
          ) {
            this.$Cache.set("newGift", data.newPeopleCouponList);
          } else {
            this.$Cache.clear("newGift");
          }
          this.getUserInfo(data);
        })
        .catch((error) => {
          uni.hideLoading();
          uni.showModal({
            title: "提示",
            content: `错误信息${error}`,
            success: function (res) {
              if (res.confirm) {
                console.log("用户点击确定");
              } else if (res.cancel) {
                console.log("用户点击取消");
              }
            },
          });
        });
    },
    forgePassword() {
      uni.navigateTo({
        url: "/pages/users/reset-password/index",
      });
    },
    // App微信登录
    wxLogin: Debounce(function () {
      this.phone = "";
      this.captcha = "";
      let self = this;
      if (!this.isAgree)
        return this.$util.Tips({
          title: "请勾选用户隐私协议",
        });
      uni.showLoading({
        title: "登录中",
      });
      uni.login({
        provider: "weixin",
        success: function (res) {
          uni.hideLoading();
          let loginRes = res.authResult;
          self.appUserInfo.openId = loginRes.openid;
          self.appUserInfo.unionId = loginRes.unionid;
          self.appUserInfo.type =
            self.platform === "ios" ? "iosWx" : "androidWx";
          self.wxLoginGo(self.appUserInfo);
        },
        fail() {
          uni.hideLoading();
          uni.showToast({
            title: "登录失败",
            icon: "none",
            duration: 2000,
          });
        },
      });
    }),
    wxLoginGo(userInfo) {
      appAuth(userInfo)
        .then((res) => {
          let data = res.data;
          if (data.type === "register") {
            uni.navigateTo({
              url: "/pages/users/app_login/index?authKey=" + data.key,
            });
          }
          if (data.type === "login") {
            this.$store.commit("LOGIN", {
              token: data.token,
            });
            this.getUserInfo(data);
          }
          if (
            data.isNew &&
            data.newPeopleCouponList &&
            data.newPeopleCouponList.length !== 0
          ) {
            this.$Cache.set("newGift", data.newPeopleCouponList);
          } else {
            this.$Cache.clear("newGift");
          }
        })
        .catch((res) => {
          this.$util.Tips({
            title: res,
          });
        });
    },
    again() {
      this.codeUrl =
        VUE_APP_API_URL +
        "/sms_captcha?" +
        "key=" +
        this.keyCode +
        Date.parse(new Date());
    },
    getCode() {
      let that = this;
    },
    async getLogoImage() {
      let that = this;
      loginConfigApi().then((res) => {
        that.logoUrl = res.data.logo
          ? res.data.logo
          : "/static/images/logo2.png";

        that.loginBg = res.data.mobileLoginBg
          ? `url(${res.data.mobileLoginBg})`
          : "#f5f5f5";
      });
    },
    /**
     * 手机号验证码登录
     */
    loginMobile: Debounce(function () {
      let that = this;
      if (!that.phone)
        return that.$util.Tips({
          title: "请填写手机号码",
        });
      if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.phone))
        return that.$util.Tips({
          title: "请输入正确的手机号码",
        });
      if (!that.captcha)
        return that.$util.Tips({
          title: "请填写验证码",
        });
      if (!/^[\w\d]+$/i.test(that.captcha))
        return that.$util.Tips({
          title: "请输入正确的验证码",
        });
      if (!that.isAgree)
        return that.$util.Tips({
          title: "请勾选用户隐私协议",
        });
      loginMobile({
        phone: that.phone,
        captcha: that.captcha,
        spreadPid: that.$Cache.get("spread"),
      })
        .then((res) => {
          let data = res.data;
          let newTime = Math.round(new Date() / 1000);
          this.$store.commit("LOGIN", {
            token: res.data.token,
          });
          if (
            data.isNew &&
            data.newPeopleCouponList &&
            data.newPeopleCouponList.length !== 0
          ) {
            this.$Cache.set("newGift", data.newPeopleCouponList);
          } else {
            this.$Cache.clear("newGift");
          }
          that.getUserInfo(data);
        })
        .catch((res) => {
          that.$util.Tips({
            title: res,
          });
        });
    }),
    async register() {
      let that = this;
      if (!that.phone)
        return that.$util.Tips({
          title: "请填写手机号码",
        });
      if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.phone))
        return that.$util.Tips({
          title: "请输入正确的手机号码",
        });
      if (!this.isAgree)
        return this.$util.Tips({
          title: "请勾选用户隐私协议",
        });
      if (!that.captcha)
        return that.$util.Tips({
          title: "请填写验证码",
        });
      if (!/^[\w\d]+$/i.test(that.captcha))
        return that.$util.Tips({
          title: "请输入正确的验证码",
        });
      if (!that.password)
        return that.$util.Tips({
          title: "请填写密码",
        });
      if (!/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/i.test(that.password))
        return that.$util.Tips({
          title: "您输入的密码过于简单",
        });
      register({
        phone: that.phone,
        captcha: that.captcha,
        password: that.password,
        spread_spid: that.$Cache.get("spread"),
        // spread_spid: uni.getStorageSync('spid') || 0
      })
        .then((res) => {
          that.$util.Tips({
            title: res,
          });
          that.formItem = 1;
        })
        .catch((res) => {
          that.$util.Tips({
            title: res,
          });
        });
    },
    //滑块验证成功后
    handlerOnVerSuccess(data) {
      this.$refs.verify.hide();
      this.codeSend();
    },
    codeSend() {
      let that = this;
      if (!that.phone)
        return that.$util.Tips({
          title: "请填写手机号码",
        });
      if (!this.isAgree)
        return this.$util.Tips({
          title: "请勾选用户隐私协议",
        });
      if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.phone))
        return that.$util.Tips({
          title: "请输入正确的手机号码",
        });
      registerVerify(that.phone)
        .then((res) => {
          that.$util.Tips({
            title: res.message,
          });
          that.sendCode();
        })
        .catch((err) => {
          return that.$util.Tips({
            title: err,
          });
        });
    },
    code: Debounce(function () {
      let that = this;
      if (!that.phone)
        return that.$util.Tips({
          title: "请填写手机号码",
        });
      if (!this.isAgree)
        return this.$util.Tips({
          title: "请勾选用户隐私协议",
        });
      if (!/^1(3|4|5|7|8|9|6)\d{9}$/i.test(that.phone))
        return that.$util.Tips({
          title: "请输入正确的手机号码",
        });
      that.$refs.verify.show();
    }),
    navTap: function (index) {
      this.current = index;
    },
    submit: Debounce(function () {
      let that = this;
      if (!that.phone)
        return that.$util.Tips({
          title: "请填写账号",
        });
      if (!/^[\w\d]{5,16}$/i.test(that.phone))
        return that.$util.Tips({
          title: "请输入正确的账号",
        });
      if (!that.password)
        return that.$util.Tips({
          title: "请填写密码",
        });
      if (!that.isAgree)
        return that.$util.Tips({
          title: "请勾选用户隐私协议",
        });
      uni.showLoading({
        title: "正在登录中",
      });
      loginH5({
        phone: that.phone,
        password: that.password,
        spread_spid: that.$Cache.get("spread"),
      })
        .then(({ data }) => {
          that.$store.commit("LOGIN", {
            token: data.token,
          });
          uni.hideLoading();
          that.getUserInfo(data);
        })
        .catch((e) => {
          uni.hideLoading();
          that.$util.Tips({
            title: e,
          });
        });
    }),
    getUserInfo(data) {
      // #ifdef H5
      const base = "/h5";
      // #endif
      // #ifndef H5
      const base = "";
      // #endif
      this.$store.commit("SetMerchantEmployeeList", {
        merchantEmployeeList: data.merchantEmployeeList,
      });
      this.$store.dispatch("GetGlobalConfig");
      this.$store.commit("UPDATE_USERINFO", {
        avatar: data.avatar,
        nickname: data.nickname,
        phone: data.phone,
      });
      this.$store.commit("SETUID", data.id);
      let backUrl = this.$Cache.get(BACK_URL) || `${base}/pages/index/index`;
      if (backUrl.indexOf("/pages/users/login/index") !== -1) {
        backUrl = `${base}/pages/index/index`;
      }

      // #ifdef H5
      location.replace(backUrl);
      // #endif

      // #ifndef H5
      uni.reLaunch({
        url: backUrl,
      });
      // #endif
    },
  },
};
</script>
<style lang="scss" scoped>
$theme-color: #003b99;

.navbar {
  position: fixed;
  left: 0;
  right: 0;
  padding-left: 30upx;
}
.appLogin {
  margin-top: 60rpx;

  .hds {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 24rpx;
    color: #666666;

    .line {
      width: 68rpx;
      height: 1rpx;
      background: #666666;
    }

    p {
      margin: 0 20rpx;
    }
  }

  .btn-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 30rpx;
    // gap: 30upx;

    .btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 80rpx;
      height: 80rpx;
      border-radius: 50%;
      overflow: hidden;
      margin: 0 15upx;
    }

    .apple-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-left: 30rpx;
      background: #000;
      border-radius: 34rpx;
      font-size: 40rpx;

      .icon-s-pingguo {
        color: #fff;
        font-size: 40rpx;
      }
    }

    .iconfont {
      font-size: 40rpx;
      color: #fff;
    }
  }
}

.main_color {
  @include main_color(theme);
}

.bg_color {
  @include main_bg_color(theme);
}

.code img {
  width: 100%;
  height: 100%;
}

.acea-row.row-middle {
  input {
    margin-left: 20rpx;
    display: block;
  }
}

.login-wrapper {
  padding: 30rpx;
  background-size: 100% auto !important;
  width: 100vw;
  height: 100vh;
  padding-bottom: env(safe-area-inset-bottom);
  position: relative;
  .logo-icon {
    position: absolute;
    width: 256upx;
    height: 256upx;
    overflow: hidden;
    top: 20vh;
    image {
      width: 100%;
    }
  }

  .whiteBg {
    margin-top: auto;
    width: 650upx;
    // margin-bottom: 212upx;
    margin-top: 45vh;
    flex: 1;
    .list {
      .item {
        border-bottom: 1px solid #f0f0f0;
        background: #fff;
        border-radius: 16rpx;
        margin-bottom: 20upx;
        &:last-child {
          margin-bottom: 0;
        }
        .input-prefix-image,
        .input-append-image {
          width: 80rpx;
          height: 80rpx;
          image {
            width: 100%;
            height: 100%;
          }
        }

        .row-middle {
          position: relative;
          padding: 8upx;
          // padding-right: 45upx;

          .texts {
            flex: 1;
            font-size: 28rpx;
            height: 80rpx;
            line-height: 80rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            border: none;
            margin-left: 8upx;
            // #ifdef MP
            justify-content: flex-start;
            // #endif

            &:focus-visible {
              outline: none;
            }
          }
          .codeIput {
            margin-left: 8upx;
            // #ifdef MP
            justify-content: flex-start;
            // #endif
          }

          input {
            flex: 1;
            font-size: 28rpx;
            height: 80rpx;
            line-height: 80rpx;
            display: flex;
            justify-content: center;
            align-items: center;
          }

          .code {
            position: absolute;
            right: 30rpx;
            top: 50%;
            color: $theme-color;
            font-size: 26rpx;
            transform: translateY(-50%);
            background: transparent;
          }
        }
      }
    }

    .logon {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 86rpx;
      margin-top: 50rpx;
      background-color: $theme-color;
      color: #ffffff;
      font-size: 30rpx;
      border-radius: 16upx;
    }

    .tips {
      margin: 30rpx;
      text-align: center;
      color: #999;
    }
    .protocol {
      margin-top: 50upx;

      ::v-deep .uni-checkbox-input.uni-checkbox-input-checked {
        background: $theme-color !important;
        border-color: $theme-color !important;
      }

      .forget-password {
        font-size: 26upx;
        color: $theme-color;
      }
    }

    .protocol_text {
      .font_pro {
        color: $theme-color;
      }
    }

    // &.is-app-screen {
    //   margin-bottom: 342upx;
    // }
    .login-button-group {
      width: 100%;
      .login-button {
        width: 100%;
        height: 96upx;
        border-radius: 16upx;
        font-size: 32rpx;
        color: #ffffff;
        background: $theme-color;
        margin-bottom: 32upx;
        &:last-child {
          margin-bottom: 0;
        }
        &.wechat {
          background: #08ba5c;
        }
        .button-prefix {
          width: 80upx;
          height: 80upx;
          margin-right: 8upx;
          image {
            width: 100%;
            height: 100%;
            overflow: hidden;
          }
        }
      }
    }
  }

  .copyright {
    width: 242rpx;
    overflow: hidden;
    margin-bottom: 78upx;
    min-height: 109upx;
    align-items: flex-end;
    image {
      width: 100%;
      height: auto;
    }
  }
}
</style>
